<template>
	<view class="wrap" style="padding-bottom: 100px;"  :style="viewColor">
		<view class="list-main" v-show="order">
		    <view class="display-flex-column">
				<view class="row-center tytop">
					<view class="type-desc">
						{{order.type_desc?order.type_desc:""}}
					</view>
					<view class="add_time">
						下单时间：{{order.add_time}}
					</view>
					<view class="status_desc">
						{{order.status_desc?order.status_desc:""}}
					</view>
				</view>
				<view class="row" style="margin-bottom: 15px;">
					<view class="display-flex-column">
	
						<view class="row-center">
							<view class="od-item ml-15">
								目的地：
							</view>
							<view class="od-item">
								{{order.destination}}
							</view>
						</view>
					</view>
				</view>
	
				
			</view>
		</view>
	    <view class="ex-main display-flex-column ">
			<view class="row-center ex-color">
				<text>出行人数</text>
				<text style="margin-left: auto;">{{order.people_sum}}人</text>
			</view>
			<view class="row-center ex-color">
				<text>出行天数</text>
				<text style="margin-left: auto;">{{order.days}}人</text>
			</view>
	    </view> 
		<view  class="ex-main display-flex-column ">
			<view class="row-center ex-color">
				<text>报价</text>
				<text style="margin-left: auto;">￥{{order.price?order.price:"--"}}元</text>
			</view>
		</view> 
		<!-- 详情介绍 -->
		<view class="ex-main pd-10" v-if="order.content">
			<view class="text-14 text-black ft-w700">
				行程说明
			</view>
			<view class="">
				<jyf-parser    :html="order.content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser>
			</view>
		</view>
		
		<!-- 行程介绍 -->
		<view  class="ex-main pd-10" v-if="routeDays.length">
			<view class="pad20">
				<view  class="">
					<view class='text-14 text-black ft-w700 mb-15'>{{order.dz_days}}日行程</view>
					<view class="route-detail-box" v-for="(days,indexDay) in routeDays" :key="indexDay">
						<view class="route-detail-day">
							<text class="text-14 text-black mr-4 ft-w700">D{{indexDay+1}}</text>
							<text class="color-dde  mr-4 ">|</text>
							<text class="text-14 text-black ft-w700">{{days.title}}</text>
						</view>
						
						<view class="route-detail-content" v-if="days.show">
							<view class="route-detail-day-content" v-for="(day,indexd) in days.productRouteDetail" :index="indexd">
								<view class="route-detail-day-title mb-10">
									<view class="route-detail-img-block">
										<view class="route-detail-img">
											<image :src="'../../../static/images/xc_type'+day.type+'.png'"></image>
										</view>
									</view>
									<view class="display-flex">
										<text class="text-14 text-black ft-w700">{{day.happen_time}}</text>
										<text class="text-14 text-black ft-w700 mr-2 ml-2"> · </text>
										<text class="text-14 text-black ft-w700">{{filterType(day.type, day)}}</text>
									</view>
									
								</view>
								<view class="">
									<view v-if="day.hotel" class="text-12 color_3e mb-10">
										入住酒店：{{hotel}}
									</view>
									<view v-if="day.address" class="text-12 color_3e mb-10">
										{{filterAddressType(day.type,day)}}
									</view>
									<view v-if="day.scenics" class="text-12 color_3e mb-10">
										<view class="mb-5">
											您将游览以下景区：
										</view>
										<view class="mb-5 color-51" v-for="(scenic,indexs) in JSON.parse(day.scenics)" :key="indexs">
											{{indexs+1}}.{{scenic.name}}
										</view>
									</view>
									<view class="text-12 color_3e mb-10 line-heiht16">
										{{day.content}}
									</view>
									<view v-if="day.take_time_hour||day.take_time_min" class="text-12 color_3e display-flex display-flex-align-center">
										<text class="iconfont icon-ic_clock2 mr-5 "></text>
										<text>{{filterTimeType(day.type,day)}}</text>
									</view>
								</view>
								<view class="route-detail-boder-left">
									
								</view>
							</view>
						</view>
						<view v-if="!days.show" @click="showRouteDay(indexDay)" class="route-detail-hide">
							<text>展开</text>
							<text  class="iconfont icon-ic_down" ></text>
						</view>
						<view v-if="days.show" @click="hideRouteDay(indexDay)"  class="route-detail-hide">
							<text>收起</text>
							<text class="iconfont icon-ic_up"></text>
						</view>
					</view>
				
				</view>
				
			</view>
		</view>
		<!-- 行程介绍 -->

		<!-- 详情介绍 -->
		<view style="position:fixed;bottom:0;left:0;right:0;padding:20rpx 24rpx;padding-bottom:20rpx;background-color: #fff;z-index: 10;">
			<view @click="orderCancel" v-if="order.status == 0"  style="background:#007AFF;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >取消订单</view>
			<view v-if="order.status == -1"  style="background:#dadbdc;color:#6d6d6d;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >订单已取消</view>
			<view @click="goPay" v-if="order.status == 1"  style="background:#007AFF;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >立即支付（￥{{order.price?order.price:''}}）</view>
			<view @click="goPay" v-if="order.status == 2"  style="background:#007AFF;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >待出行</view>
			<view v-if="order.status == 3||order.status == 4"  style="background:#007AFF;color:#fff;padding:26rpx;font-size:30rpx;z-index:9;text-align:center;border-radius: 6px; " >已完成</view>
		</view>
		
		
		
		<payment :payMode='payMode' :is-call="true" :pay_close="pay_close" @onChangeFun='onChangeFun' 
			:totalPrice='totalPrice'></payment>
	</view>	
</template>

<script>
	import {
			mapGetters
		} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	
	import { userDingzhiDetail,dingzhiCancel } from "@/api/api.js"
    import { orderDingzhiCreate, orderDingzhiPay } from "@/api/order.js"
    import payment from '@/components/payment';
      
	export default {
		computed: mapGetters(['isLogin','viewColor']),
		components:{
			payment
		},
		data() {
			return {
				id: '',
				order: '',
				pay_close: false,
				totalPrice: 0,
				payType: 'weixin', //支付方式
				//支付方式
				payMode: [
					// #ifdef MP-WEIXIN
					{
					name: '微信支付',
					icon: 'icon-a-ic_wechatpay',
					value: 'routine',
					title: '微信快捷支付',
					payStatus: true
					},
					// #endif
					// #ifdef MP-ALIPAY
					{
					name: '支付宝支付',
					icon: 'icon-a-ic_alipay',
					value: 'alipayRoutine',
					title: '支付宝支付',
					payStatus: true
					}
					// #endif
					// #ifdef MP-BAIDU
					{
					name: '百度支付',
					icon: 'icon-baidu-zhifu',
					value: 'baiduRoutine',
					title: '百度支付',
					payStatus: true
					}
					// #endif
					
				],
				tagStyle: {
					img: 'width:100%;display:block;'
				},
				routeDays: []
				
			};
		},
		onShow() {
			if(this.isLogin == true){
				uni.showLoading({
					title:'请稍后...'
				})
				 this.userBaocheDetail()
			}else{
				toLogin();
			}
			
	
		},
		onLoad(option) {
			if(this.isLogin){
			} else {
				toLogin()
			}
			this.id= option.id
			
	
		},
		onReady() {
		},
		methods:{
			goPay() {
			
				this.pay_close = true;
			},

             /**
			 * 关闭支付组件
			 * 
			 */
			payClose: function() {
				this.pay_close = false;
			},
			/**
			 * 事件回调
			 *
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			
			payCheck(type) {
				
				this.payType = type;
			
				this.SubOrder();
			},
			SubOrder: function(e) {
				let that = this,
					data = {};
			  
				if (!that.payType) return that.$util.Tips({
					title: '请选择支付方式'
				});
				
			
			    
				data = {
					id: that.id,
					pay_pype: that.payType,
				}
				// if (data.payType == 'yue' && parseFloat(that.userInfo.now_money) < parseFloat(that.totalPrice))
				// 	return that.$util.Tips({
				// 		title: '余额不足！'
				// 	});
			
				uni.showLoading({
					title: '订单支付中'
				});
				that.payment(data);
			},
			
			payment: function(data) {
			
				let that = this;
			    orderDingzhiCreate(data).then(res => {
					var order = res.data.order
					uni.showLoading({
						title:'请稍后...'
					})
					
				
					
					
					orderDingzhiPay({
						order_id: order.order_id,
						pay_type: that.payType
					}).then(res => {
						
						let status = res.data.status,
							orderId = res.data.result.order_id,
							callback_key = res.data.result.pay_key,
							jsConfig = res.data.result.config,
							goPages =  '/pages/bus/dingzhi/order_list'
						switch (status) {
							case 'ORDER_EXIST':
							case 'EXTEND_ORDER':
							case 'PAY_ERROR':
							case 'error':
								uni.hideLoading();
								that.payClose();
								return that.$util.Tips({
									title: res.message
								});
								break;
							case 'success':
								uni.hideLoading();
								that.payClose();
								return that.$util.Tips({
									title: res.message,
									icon: 'success'
								});
								break;
							case 'alipay':
							case "alipayQr":
								uni.hideLoading();
								that.payClose();
								uni.navigateTo({
									url: '/pages/order_pay_back/index?keyCode='+callback_key+'&url='+jsConfig+'&type=11',
								})	
								return;
								break;
								// #ifndef MP
							case "wechat":
							case "weixin":
							case "weixinApp":
								jsConfig.timeStamp = jsConfig.timestamp;
								// #ifndef APP-PLUS
								this.$wechat.pay(jsConfig).then(res => {
									uni.hideLoading();
									that.payClose();
									return that.$util.Tips({
										title: res.message,
										icon: 'success'
									});
								}).catch(res => {
									uni.hideLoading();
									if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
										title: '取消支付'
									});
								})
								// #endif
								// #ifdef APP-PLUS
								let mp_pay_name=''
								if(uni.requestOrderPayment){
									mp_pay_name='requestOrderPayment'
								}else{
									mp_pay_name='requestPayment'
								}
								uni[mp_pay_name]({
									provider: 'wxpay',
									orderInfo: jsConfig,
									success: (e) => {
										uni.hideLoading();
										that.payClose();
										return that.$util.Tips({
											title: '支付成功',
											icon: 'success'
										});
									},
									fail: (e) => {
										uni.hideLoading();
										that.payClose();
										uni.showModal({
											content: "支付失败",
											showCancel: false,
											success: function(res) {}
										})
									},
									complete: () => {
										uni.hideLoading();
									},
								});
								// #endif
								break;
								// #endif
								// #ifdef MP
							case "routine":
								jsConfig.timeStamp = jsConfig.timestamp;
								let mp_pay_name=''
								if(uni.requestOrderPayment){
									mp_pay_name='requestOrderPayment'
								}else{
									mp_pay_name='requestPayment'
								}
								uni[mp_pay_name]({
									...jsConfig,
									success: function(res) {
										uni.hideLoading();
										that.payClose();
										return that.$util.Tips({
											title: '支付成功',
											icon: 'success'
										}, {
											tab: 5,
											url: goPages
										});
									},
									fail: function(e) {
										uni.hideLoading();
										that.payClose();
										return that.$util.Tips({
											title: '取消支付'
										});
									},
								})
								break;
							case "alipayRoutine":
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: jsConfig,
									success: function(res) {
										uni.hideLoading();
										that.payClose();
										return that.$util.Tips({
											title: '支付成功',
											icon: 'success'
										}, {
											tab: 5,
											url: goPages
										});
									},
									fail: function(e) {
										uni.hideLoading();
										that.payClose();
										return that.$util.Tips({
											title: '取消支付'
										});
									},
								})
								
								break;	
								// #endif
							case "balance":
								uni.hideLoading();
								that.payClose();
								//余额不足
								return that.$util.Tips({
									title: res.message
								}, {
									tab: 5,
									url: goPages
								});
								break;
								// #ifdef H5
							case 'h5':
								let host = window.location.protocol + "//" + window.location.host;
								let url = `${host}/pages/annex/vip_center/index`
								let eUrl = encodeURIComponent(url)
								let jsurl = jsConfig.mweb_url || jsConfig.h5_url
								let locations = `${jsurl}&redirect_url=${eUrl}`
								setTimeout(() => {
									location.href = locations;
								}, 100);
								break;
								// #endif
								// #ifdef APP-PLUS
							case 'alipayApp':
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: jsConfig,
									success: (e) => {
										uni.hideLoading();
										that.payClose();
										return that.$util.Tips({
											title: '支付成功',
											icon: 'success'
										});
									},
									fail: (e) => {
										uni.hideLoading();
										uni.showModal({
											content: "支付失败",
											showCancel: false,
											success: function(res) {}
										})
									},
									complete: () => {
										uni.hideLoading();
									},
								});
								break;
								// #endif
						}
				
					}).catch(err => {
						uni.hideLoading();
						that.userBaocheDetail()
						return that.$util.Tips({
							title: err
						}, () => {
							that.pay_fail()
						});
					})
				})	
			},
			pay_complete: function() {
				this.$set(this, 'pay_close', false);
			},
			/**
			 * 支付失败回调
			 * 
			 */
			pay_fail: function() {
				this.pay_close = false;
			},
			pay_success: function() {
				this.pay_close = false;
			},
			showRouteDay(index){
				let that = this;
				that.$set(that.routeDays[index], 'show', true)
				console.log(11,this.routeDays[index])
				that.$forceUpdate();
			
			},
			hideRouteDay(index){
				let that = this;
				that.$set(that.routeDays[index], 'show', false)
				console.log(22,this.routeDays[index])
				that.$forceUpdate();
			
			},
			filterType(type, day){
				// 类型 1.集合 2.结束行程 3.餐饮 4.酒店5.航班6.景点7.自费8.自由活动9.交通10.其他
				switch (type) {
					case 1:
						return "集合";
					case 2:
						return "结束行程";
					case 3:
						return day.dinner? day.dinner: "餐饮";
					case 4:
						return "酒店";
					case 5:
						return day.airplan ?day.airplan: "航班";
					case 6:
						return "景点";
					case 7:
						return "自费";
					case 8:
						return "自由活动";
					case 9:
						return "交通";
					case 10:
						return "其他";		
				}
				
			},
			filterTimeType(type, day){
				// 类型 1.集合 2.结束行程 3.餐饮 4.酒店5.航班6.景点7.自费8.自由活动9.交通10.其他
				switch (type) {
					case 1:
						return "预计时长"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 2:
						return "预计时长"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 3:
						return "用餐时长：约"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 4:
						return "预计时长"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 5:
						return "预计时长"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 6:
						return "游玩时长：约"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 7:
						return "预计时长"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 8:
						return "活动时长：约"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 9:
						return "交通时长：约"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
					case 10:
						return "预计时长"+ (day.take_time_hour?  day.take_time_hour +'小时':'') + (day.take_time_min ? day.take_time_min + '分钟':'');
				}
				
			},
			filterAddressType(type, day){
				// 类型 1.集合 2.结束行程 3.餐饮 4.酒店5.航班6.景点7.自费8.自由活动9.交通10.其他
				switch (type) {
					case 1:
						return "集合地点："+day.address;
					case 2:
						return "地点："+day.address;
					case 3:
						return "用餐地址："+day.address;
					case 4:
						return "地点："+day.address;
					case 5:
						return "地点："+day.address;
					case 6:
						return "地点："+day.address;
					case 7:
						return "地点："+day.address;
					case 8:
						return "地点："+day.address;
					case 9:
						return "地点："+day.address;
					case 10:
						return "地点："+day.address;
				}
				
			},
			
			userBaocheDetail(){
				var that = this
				uni.showLoading({
					title:'请稍后...'
				})
				userDingzhiDetail({id: this.id}).then(res => {
					uni.hideLoading()
					this.order = res.data
					that.$set(that,'routeDays',res.data.productRoute[0]['productRouteDay'])
					if(this.routeDays&&this.routeDays.length){
						for(var i = 0; i < this.routeDays.length; i++){
							this.routeDays[i].show = false;
						}
					}
					if(this.routeDays&&this.routeDays.length==1){
						this.routeDays[0].show = true;
					}
					this.totalPrice = res.data.price 
				}).catch(err => {
					uni.hideLoading()
					return this.$util.Tips({
						title: err
					}); 
				})
			},
			orderCancel(){
				uni.showLoading({
					title:'请稍后...'
				})
				dingzhiCancel({id: this.id}).then(res => {
					uni.hideLoading()
					this.$util.Tips({
						title: "取消订单成功！"
					});
					this.userBaocheDetail()
					uni.navigateBack()
				}).catch(err => {
					this.$util.Tips({
						title: err.msg
					});
				})
			},
			
		},
		
		
	}
</script>

<style lang="scss" scoped>
   .list-main{
		position: relative;
		margin: 12rpx 24rpx;
		background-color: #fff;
		border-radius: 4px;
	}
	
	.od-item{
		color: #888;
		font-size: 12px;
	}
	
	.ticket-item {
		margin-left: auto;
		margin-right: 20px;
	}
	.type-desc{
		background-color: #007aff;
		color: #fff;
		padding: 1px 3px;
		border-radius: 3px;
	}
	.add_time{
		margin-left: 4px;
		font-size: 13px;
		color: #a7a7a7;
	}
	.tytop{
		margin: 8px 5px;
	}
	.status_desc{
		margin-left: auto;
		color: #ff4231;
		font-weight: 700;
	}
	.dan{
		margin-left: 4px;
		font-size: 13px;
		color: #a7a7a7;
	}

  .ex-main{
		position: relative;
		margin: 60rpx 24rpx 0 24rpx;
		background-color: #fff;
		border-radius: 4px;
		padding: 10px;
	}
	.ex-color{
		color: #a7a7a7;
		font-size: 13px;
		margin-bottom: 13px;
	}
	.station_dot {
	    width: 17rpx;
	    height: 17rpx;
	    border-radius: 50%;
	    margin: 0 30rpx;
	}
	
	.station_dot_start {
	    background-color: rgb(142, 238, 25);
	}
	
	.station_dot_end {
	    background-color: rgb(243, 22, 22);
	}
	.line {
	    height: 2rpx;
	    background: #f0f0f0;
	}
	.route-detail-box{
		display: flex;
		flex-direction: column;
		background-color: #f8fafd;
		margin-bottom: 5px;
		padding: 10px 0 10px 10px;
		border-radius: 5px;
	}
	.route-detail-day{
		background-color: #f8fafd;
		text-align: start;
		margin-right: 5px;
		margin-bottom: 5px;
		line-height: 1.6;
	}
	.route-detail-hide{
		text-align: center;
		margin: 5px 0;
		color: var(--view-theme);;
	}
	.route-detail-content{
		position: relative;
		padding-bottom: 10px;
		margin-left: 30px;
	}
	.route-detail-day-content{
		position: relative;
		padding-bottom: 10px;
		padding-right: 10px;
	}
	.route-detail-day-title{
		position: relative;
		
	}
	.route-detail-img-block{
		position: absolute;
		left: -36px;
		top: 0;
		background: #f8fafd;
		padding: 0 6px;
		z-index: 3;
		align-items: center;
		justify-content: center;
	}
	.route-detail-img{
		width: 20px;
		height: 20px;
		position: relative;
		left: .10px;
	}
	.route-detail-img image {
		width: 100%;
		height: 100%;
	}
	.route-detail-boder-left{
		position: absolute;
		border-left: 1px dashed #999;
		left: -20px;
		top: 0;
		bottom: 0;
		transform: scaleX(.5);
	}
</style>